<template>
    <link type="text/css" rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/ranking.css">
    <div class="rank_header">
       <div class="title">
            <span>
                家居用品热销榜
            </span>
       </div>
    </div>
    <!-- 下拉刷新 -->
  <van-pull-refresh v-model="refreshing" @refresh="refresh">
    <!-- 加载列表 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :offset="10"
      :immediate-check="true"
      finished-text="没有更多了"
      @load="load"
    >
        <!-- 商品卡片 -->
        <li v-for="(item,key) in list" :key="key">
            <div class="rank_box">
            <div class="item">
                <div class="top">
                    <router-link :to="{path: '/product/info', query: {proid: item.id}}">
                        <van-image
                            width="135"
                            height="125"
                            :src="item.thumbs_text"
                            fit="fill"
                        />
                    </router-link>
                    <div class="content">
                        <div class="title"><span>{{item.flag_text}}</span>{{item.name}}</div>
                        <p class="desc">“很好看宝宝们”</p>
                        <p class="middle">剩余库存：{{ item.stock }}{{ item.unit_text }}</p>
                    </div>
                </div>
                <div class="footer">
                    <div class="price">
                        ￥<span>{{ item.team }}</span>
                        券后价
                        <span>极速退款</span>
                    </div>
                    <van-button round class="btn" @click="toProductInfo(item.id)">去购买></van-button>
                </div>
                <div class="tip">
                    <img src="/assets/images/hot.png" alt="">
                    <span>热销指数9.9</span>
                </div>
            </div>
        </div>
        </li>
        
    </van-list>
  </van-pull-refresh>


</template>

<script setup>
    const {proxy} = getCurrentInstance()

    //下拉刷新的数据
    let list = ref([]) //数据列表
    let page = ref(1)  //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新

    //下拉刷新
    const refresh = async () =>
    {
        //清空查询参数
        page.value = 1
        list.value = []
        finished.value = false
        loading.value = true
        //加载数据方法
        load()
    }

    //加载数据方法 查询订单数据
    const load = async () =>
    {
        //判断是否为加载中的状态
        if(refreshing.value)
        {
        refreshing.value = false
        }

        // 发送请求
        var result = await proxy.$POST({
        url: '/product/index',
        params: {
            page:page.value
        }
        })
       

        //请求发送完毕后，加载状态也就完毕了
        loading.value = false

        //如果没有更多数据了 就说明已经加载到底了....
        if(result.code == 0)
        {
        finished.value = true
        return;
        }

        list.value = list.value.concat(result.data.list)
        page.value++
    }

    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({path: '/product/info', query: {proid}})
</script>

<style>
    .van-image{
        display: block
    }
</style>